<template>
  <div class="filter">
    <ul>
      <li class="sort-flds" :class="{ sortFour: !filterXuan }" @click="sort('paixuA', 1)">
        <span class="title_sel" :class="isActive==1 ? 'isActive' : ''">默认</span>
        <img
          v-show="paixuA==0"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down.png"
        >
        <img
          v-show="paixuA==1"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_up-select.png"
        >
        <img
          v-show="paixuA==2"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down-select.png"
        >
      </li>
      <li class="sort-flds" :class="{ sortFour: !filterXuan }" @click="sort('paixuB', 2)">
        <span class="title_sel" :class="isActive==2 ? 'isActive' : ''">销量</span>
        <img
          v-show="paixuB==0"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down.png"
        >
        <img
          v-show="paixuB==1"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_up-select.png"
        >
        <img
          v-show="paixuB==2"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down-select.png"
        >
      </li>
      <li class="sort-flds" :class="{ sortFour: !filterXuan }" @click="sort('paixuC', 3)">
        <span class="title_sel" :class="isActive==3 ? 'isActive' : ''">价格</span>
        <img
          v-show="paixuC==0"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down.png"
        >
        <img
          v-show="paixuC==1"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_up-select.png"
        >
        <img
          v-show="paixuC==2"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down-select.png"
        >
      </li>
      <li class="sort-flds" :class="{ sortFour: !filterXuan }" @click="sort('paixuD', 4)">
        <span class="title_sel" :class="isActive==4 ? 'isActive' : ''">时间</span>
        <img
          v-show="paixuD==0"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down.png"
        >
        <img
          v-show="paixuD==1"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_up-select.png"
        >
        <img
          v-show="paixuD==2"
          class="am-header-icon-custom"
          src="/static/img/tagbg_item_down-select.png"
        >
      </li>
      <li v-show="filterXuan" class="sort-flds-end" @click="sort('paixuE', 5)">
        <span class="title_sel">筛选</span>
        <img class="am-header-icon-custom" src="../../../assets/img/tagbg_item5.png">
      </li>
    </ul>
    <div id="leftmask" v-show="shaixuan" @click="quxiao"></div>
    <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight">
      <div class="search_new" v-show="shaixuan">
        <!-- 分类 -->
        <ul v-show="isChildren==='isType'" class="area c-fix" id="industrydiv">
          <div class="m_titleDiv">
            <div class="btnTitleLeft" @click="handleClickBack">返回</div>
            <font class="str_ftitle">分类</font>
            <div class="btnTitleRight" @click="handleClickType">确认</div>
          </div>
          <div class="white-kind" id="white-kind">
            <div v-for="item of list" :key="item.id" >
              <div class="city-li" @click="handleClickSel(item.id, false, item.name, false)">
                <a class="city-li-a" :class="listType===item.id?'city-li-b':''" is_privilege="0" pctgrid="18" href="#">{{item.name}}</a>
              </div>
              <ul v-show="listType===item.id" class="current_cls" style="display: block;">
                <div class="dib w330">
                  <div v-for="goods of item.childArray" :key="goods.id" class="t-size" :class="listSel===goods.id?'sel':''" @click="handleClickSel(item.id, goods.id, item.name, goods.name)">
                    <b></b>{{goods.name}}
                  </div>
                </div>
              </ul>
              <div class="line"></div>
            </div>
          </div>
        </ul>
        <!-- 筛选 -->
        <ul v-show="isParent" class="area c-fix" id="areadiv" style="display: block;">
          <div class="m_titleDivSel">
            <div class="btnTitleLeft" @click="quxiao">取消</div>
            <font class="str_ftitle">筛选</font>
            <div class="btnTitleRight" @click="handleClickSubmit">确认</div>
          </div>
          <div class="white-list" style="margin-top:10px;">
            <div class="list-one border-bottom"  @click="clickShaiXuan('isType')">
              <div class="left-title">
                <span>分类</span>
              </div>
              <div class="center-content">
                <span v-show="!listTypeSel" class="rights-spanStr">全部</span>
                <span v-show="listTypeSel" class="rights-spanStr list_color_red">{{this.listTypeSel}}</span>
              </div>
              <div class="right-action">
                <img src="../../../assets/img/btn_right.png" class="right-actionImg" alt>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="clickShaiXuan('isJiage')">
              <div class="left-title">
                <span>价格</span>
              </div>
              <div class="center-content">
                <span v-show="!priceUpDown" id="costTitle" class="rights-spanStr">全部</span>
                <span v-show="priceUpDown" id="costTitle" class="rights-spanStr list_color_red">{{this.priceUpDown}}</span>
              </div>
              <div class="right-action"><img src="../../../assets/img/btn_right.png" class="right-actionImg" alt></div>
            </div>
          </div>
          <div class="btndiv_cancel">
            <button @click="handleClickClear('all')" class="small-type-button6" type="button" style="width:100%;">清除选项</button>
          </div>
        </ul>
        <!-- 价格区间 -->
        <ul v-show="isChildren==='isJiage'" class="div_mo" id="modiv" style="width: 100%;">
          <div class="m_titleDiv">
            <div class="btnTitleLeft" @click="handleClickBack">返回</div>
            <font class="str_ftitle">价格区间</font>
            <div class="btnTitleRight" @click="handleClickJiage">确认</div>
          </div>
          <div class="list-one" onclick>
            <div v-if="priceUp && priceDown" class="cost-title list_color_red">已选择：￥{{this.priceUp}} - ￥{{this.priceDown}}</div>
            <div v-else class="cost-title list_color_red">全部</div>
          </div>
          <div class="white-list" id="white-price">
            <div class="list-one" @click="handleClickPrice(1, 50)">
              <div class="cost-title">
                <span>￥1 - ￥50</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="handleClickPrice(10, 100)">
              <div class="cost-title">
                <span>￥50 - ￥100</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="handleClickPrice(100, 200)">
              <div class="cost-title">
                <span>￥100 - ￥200</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="handleClickPrice(200, 500)">
              <div class="cost-title">
                <span>￥200 - ￥500</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="handleClickPrice(500, 1000)">
              <div class="cost-title">
                <span>￥500 - ￥1000</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="list-one" @click="handleClickPrice(1000, 2000)">
              <div class="cost-title">
                <span>￥1000 - ￥2000</span>
              </div>
            </div>
            <div class="line"></div>
          </div>
          <div class="list-one" onclick>
            <div class="cost-title">自定义</div>
          </div>
          <div class="input_costDiv">
            <input v-model="priceBtnUp" type="text" class="inpucost_str" id="costCustMin">&nbsp;&nbsp;-&nbsp;
            <input v-model="priceBtnDown" type="text" class="inpucost_str" id="costCustMax">

            <div @click="handleClickPrice(priceBtnUp, priceBtnDown)" class="btnTitleRight">确认</div>
          </div>
          <div class="btndiv_cancel">
            <button
              class="small-type-button6"
              type="button"
              @click="handleClickClear('jiage')"
              style="width:100%;"
            >清除选项</button>
          </div>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
  name: 'ListFilter',
  data () {
    return {
      shaixuan: false,
      filterXuan: true,
      title_sel: true,
      isActive: 0,
      paixuA: 0,
      paixuB: 0,
      paixuC: 0,
      paixuD: 0,
      paixuE: 0,
      isParent: true,
      isChildren: true,
      list: [],
      listSelName: '',
      listSel: '',
      listType: '',
      listTypeName: '',
      listTypeSel: '',
      priceUp: '',
      priceDown: '',
      priceUpDown: '',
      priceBtnUp: '',
      priceBtnDown: ''
    }
  },
  methods: {
    sort (data, num) {
      this.isActive = num
      if (data === 'paixuA') {
        this.paixuB = 0
        this.paixuC = 0
        this.paixuD = 0
        this.paixuE = 0
        this.paixuA = this.paixuA === '1' ? '2' : '1'
      }
      if (data === 'paixuB') {
        this.paixuA = 0
        this.paixuC = 0
        this.paixuD = 0
        this.paixuE = 0
        this.paixuB = this.paixuB === '1' ? '2' : '1'
      }
      if (data === 'paixuC') {
        this.paixuA = 0
        this.paixuB = 0
        this.paixuD = 0
        this.paixuE = 0
        this.paixuC = this.paixuC === '1' ? '2' : '1'
      }
      if (data === 'paixuD') {
        this.paixuA = 0
        this.paixuB = 0
        this.paixuC = 0
        this.paixuE = 0
        this.paixuD = this.paixuD === '1' ? '2' : '1'
      }
      if (data === 'paixuE') {
        this.paixuA = 0
        this.paixuB = 0
        this.paixuC = 0
        this.paixuD = 0
        this.shaixuan = true
      }
      let res = {
        data: data,
        num: num
      }
      this.$emit('showSelect', res)
    },
    quxiao () {
      this.shaixuan = false
    },
    handleClickBack () {
      this.isParent = true
      this.isChildren = ''
    },
    clickShaiXuan (res) {
      if (res === 'isType') {
        this.isParent = false
        this.isChildren = 'isType'
      }
      if (res === 'isJiage') {
        this.isParent = false
        this.isChildren = 'isJiage'
      }
    },
    getInfo () {
      console.log(this.$route.query.customer_id)
      if (this.$route.query.customer_id) {
        this.filterXuan = false
      }
      axios.get('/meimai/interface/goods/getGoodsClassData').then((res) => {
        let datas = res.data
        if (datas.code === 0 && datas.classArray) {
          this.list = datas.classArray
        }
      })
    },
    handleClickSel (res1, res2, res3, res4) {
      this.listType = res1
      this.listTypeName = res3
      this.listSel = res2
      this.listSelName = res4
    },
    handleClickPrice (numUp, numDown) {
      if (numDown && numDown) {
        this.priceUp = numUp
        this.priceDown = numDown
      } else {
        Toast('您的价格不能为空')
        return false
      }
    },
    handleClickClear (res) {
      if (res === 'all') {
        this.listSelName = ''
        this.listSel = ''
        this.listType = ''
        this.listTypeName = ''
        this.listTypeSel = ''
        this.priceUp = ''
        this.priceDown = ''
        this.priceBtnUp = ''
        this.priceBtnDown = ''
        this.priceUpDown = ''
      }
      if (res === 'type') {
        this.listSelName = ''
        this.listSel = ''
        this.listType = ''
        this.listTypeName = ''
        this.listTypeSel = ''
      }
      if (res === 'jiage') {
        this.priceUp = ''
        this.priceDown = ''
        this.priceBtnUp = ''
        this.priceBtnDown = ''
        this.priceUpDown = ''
      }
    },
    handleClickType () {
      this.listTypeSel = this.listTypeName + '(' + this.listSelName + ')'
      this.handleClickBack()
    },
    handleClickJiage () {
      this.priceUpDown = '￥' + this.priceUp + ' - ￥' + this.priceDown
      this.handleClickBack()
    },
    handleClickSubmit () {
      let data = {
        listSel: this.listSel,
        priceUp: this.priceUp,
        priceDown: this.priceDown
      }
      this.$emit('shaiData', data)
      this.quxiao()
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.filter
  position: fixed
  z-index: 100
  width: 100%
  padding: 0.16rem 0 0.2rem 0
  background-color: #fff
  text-align: center
  color: #676869
  .isActive
    color: #ec2935
  .sort-flds
    width: 18%
    text-align: center
    display: inline-block
    vertical-align: middle
    border-right: 0.02rem solid #ddd
    .title_sel
      text-decoration: none
      width: 14%
      font-size: 0.26rem
      margin-left: 0.1rem
      height: 0.9rem
      text-align: center
    .am-header-icon-custom
      height: 0.16rem
      margin-left: 0.04rem
  .sortFour
    width: 22%
  .sortFour:nth-child(4)
    border-right:none
  .sort-flds-end
    width: 19% !important
    text-align: center
    display: inline-block
    vertical-align: middle
    .am-header-icon-custom
      height: 0.16rem
      margin-left: 0.04rem
  #leftmask
    position: fixed
    width: 100%
    height: 106%
    background: rgba(51, 51, 51, 0.3)
    z-index: 1000
    top: 0px
  .search_new
    background: #f2f2f2
    color: #fff
    overflow: hidden
    height: 100%
    width: 280px
    position: fixed
    top: 0px
    right: 0px
    z-index: 1050
    overflow-y: auto
    .m_titleDiv
      text-align: center
      padding: 12px
      border-bottom: 1px solid #ddd
      background-color: #fff
      height: 56px
      box-sizing: border-box;
      .btnTitleLeft
        background-color: #ccc
        display: inline-block
        float: left
        color: #fff
        padding: 10px 6%
      .str_ftitle
        color: black
        font-size: 18px
        line-height: 2.0
      .btnTitleRight
        display: inline-block
        float: right
        color: #fff
        padding: 10px 6%
        background-color: #ec2935
    .white-kind
      background-color: white
      border-top: 1px solid #DEDBD5
      border-bottom: 1px solid #DEDBD5
      margin-top: 10px
      margin-bottom: 226px
      .city-li
        padding: 15px 0 15px 0
        position: relative
        .city-li-a
          height: 30px
          line-height: 30px
          background: url(/static/img/up-icon.png) center right no-repeat
          display: block
          color: #707070
          padding-left: 12px
          text-align: left
        .city-li-b
          height: 30px
          line-height: 30px
          background: url(/static/img/down.png) 250px center no-repeat
          display: block
          color: #333
          padding-left: 7px
      .current_cls
        padding: 10px
        width: 100%
        color: #707070
        text-align: left
        .t-size
          display: inline-block
          background: #fff
          padding: 6px
          border: 1px #ccc solid
          margin-right: 5px
          margin-bottom: 5px
          cursor: pointer
          text-align: center
        .sel
          display: inline-block
          background: #fff
          margin-right: 5px
          margin-bottom: 5px
          cursor: pointer
          text-align: center
          border: 2px #ec2935 solid
          padding: 5px
          position: relative
          b
            background: url(/static/img/bottomCheck.png) no-repeat
            background-size: cover
            position: absolute
            bottom: 0
            right: 0
            width: 13px
            height: 13px
            overflow: hidden
    .m_titleDivSel
      text-align: center
      padding: 12px
      border-bottom: 1px solid #ddd
      background-color: #fff
      .btnTitleLeft
        background-color: #ccc
        display: inline-block
        float: left
        color: #fff
        padding: 10px 6%
      .str_ftitle
        color: black
        font-size: 18px
        line-height: 2
      .btnTitleRight
        display: inline-block
        float: right
        color: #fff
        padding: 10px 6%
        background-color: #ec2935
    .white-list
      background-color: white
      border-top: 1px solid #DEDBD5
      border-bottom: 1px solid #DEDBD5
      .list-one
        width: 100%
        padding: 15px 0px 15px 0px
        box-sizing: border-box
        .left-title
          text-align: left
          width: 28%
          display: inline-block
          padding-left: 10px
          font-size: 14px
          color: #707070
          box-sizing: border-box
        .center-content
          width: 58%
          display: inline-block
          color: #777
          vertical-align: middle
          text-align: right
        .right-action
          width: 10%
          display: inline-block
          .right-actionImg
            width: 14px
            height: 19px
    .btndiv_cancel
      padding: 16px;
      margin-top: 12px;
      width: 100%;
      margin-bottom: 220px;
      box-sizing: border-box
      .small-type-button6
        color: #ec2935;
        border: 1px solid #ec2935;
        width: 100%;
        margin-right: 5px;
        background-color: #f2f2f2;
        margin-top: 10px;
        padding: 10px;
        font-size: 17px;
.cost-title
  background: transparent
  padding: 7px
  color: #707070
  box-sizing: border-box
  text-align: left
.input_costDiv
  background: #fff
  padding: 10px
  color: #333
  .inpucost_str
    display: inline-block
    width: 80px
    border: 1px solid #ccc
    border-radius: 0
    font-family: inherit
    padding: 4px
    box-sizing: border-box
  .btnTitleRight
    display: inline-block;
    float: right;
    color: #fff;
    padding: 8px 6%;
    box-sizing: border-box
    background-color: #ec2935;
.line
  background-color: #DEDBD5
  height: 1px
.list_color_red
  color: #ed2935
</style>
